<template>
  <div class="shopcart-container">
    <!--商品列表-->
    <div class="goods-list">
      <!--商品列表项区域-->
      <div class="mui-card">
        <div class="process-info">
          <p>
            <strong>订单编号</strong>
            {{ order.id }}
          </p>
        </div>
        <div class="mui-card-content" v-for="(item) in order.user_order_goods" :key="item.id">
          <div class="mui-card-content-inner flex">
            <img :src="item.goods_goods.image">
            <div class="info">
              <h1>{{ item.goods_goods.name }}</h1>
              <p class="flex">
                <span class="price">¥{{ item.price }}</span>
                <span>x{{ item.count }}</span>
              </p>
            </div>
          </div>
        </div>
        <!--订单备注-->
        <div class="process-info">
          <p><strong>订单备注</strong></p>
          <p><span>{{ order.note }}</span></p>
        </div>
        <!--配送信息-->
        <div class="process-info">
          <p>
            <strong>配送服务</strong>
            <strong>快递运输</strong>
          </p>
          <p>
            <span>中小件送货时间</span>
            <span>工作日、双休日与节假日均可送货</span>
          </p>
        </div>
        <!--收货地址-->
        <div class="process-info">
          <p><strong>收货地址</strong></p>
          <p><span>{{ order.address_name }} {{ order.address_tel }}</span></p>
          <p><span>{{ order.address_area }} {{ order.address_detail }}</span></p>
        </div>
      </div>
    </div>
    <!--运费信息-->
    <ul class="fare-info mui-card">
      <li class="fare-price flex">
        <span>商品金额</span>
        <span class="red">¥{{ order.price }}</span>
      </li>
      <li class="fare-price flex">
        <span>运费</span>
        <span class="red">¥0.00</span>
      </li>
      <li class="fare-price flex">
        <span><strong>总价</strong></span>
        <span class="red">¥{{ order.price }}</span>
      </li>
      <!--去支付按钮-->
      <div v-if="order.id && !order.is_cancel" class="flex">
        <button class="mui-btn mui-btn-primary mui-btn-block" @click="goPay">去支付</button>
      </div>
    </ul>
    <div id="payform"></div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'

export default {
  name: 'OrderShow',
  props: ['id'],
  data () {
    return {
      order: {}
    }
  },
  created () {
    this.getOrder()
  },
  methods: {
    dateFormat (fmt, date) {
      let ret
      const opt = {
        'Y+': date.getFullYear().toString(),
        'm+': (date.getMonth() + 1).toString(),
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (const k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
        }
      }
      return fmt
    },
    getOrder () {
      this.$indicator.open({
        text: '加载中'
      })
      this.$http.get('order/show', { id: this.$propsid }).then(res => {
        this.$indicator.close()
        if (res.data.code === 0) {
          this.$toast(res.data.msg)
        } else if (res.data.code === 1) {
          this.order = res.data.data
        } else if (res.data.code === 2) {
          this.$router.push({ name: 'login' })
        }
      })
    },
    goPay () {
      const _this = this
      // eslint-disable-next-line camelcase
      const biz_content = {
        out_trade_no: _this.order.id,
        total_amount: _this.order.price,
        subject: _this.order.id + '号订单',
        product_code: 'FAST_INSTANT_TRADE_PAY'
      }
      MessageBox.confirm('将跳转支付宝', '支付提示').then(action => {
        _this.$http.get('https://openapi.alipaydev.com/gateway.do', {
          params: {
            app_id: '2021000118629430',
            method: 'alipay.trade.wap.pay',
            charset: 'utf-8',
            sign_type: 'RSA2',
            sign: 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAhFrwbGn7uwzmgdkrwpH2Hxzz4cGbZBzct61A2O9KwZpOAo9vPaBKkQFk4AvmWgYv1ItRbQ6cRoG0TwMhR27/So0VYMiRkO+nbvVeWCDndQTltip8tIwdkozEGN58F8n8GoodlO7jzeZ+ty0Xb8vyuLiV6yT0PjdSjxwrjtE6OwcIXSpWFJv5hhV0IDa8cSENq5z+ABUGViuJzAyzxFovef7CS3QqCaL7PYkKyjtNMB+mP+OrVgs2TGm+5fJIYAOqiQK/egzix3PAu/iZHRUD/5p0TXW5zQ1vDXpVk/+ReM/aUA+CEY8T85ObTRwFVZyko61jvnqx2BfeNS6x/73GoQIDAQAB',
            timestamp: _this.dateFormat('YYYY-mm-dd HH:MM:SS', new Date()),
            alipayPublicKey: 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAiAb3rgQ+Ne9wmb5HASlIOi5In8Ngych9J7ku9bn58HEOw/lTr/xEhP/PmH4uvlHSqY3Iyvcgt1pDYsFMQruq0HnfHLIYvRof4Jec55J5Tr8tUxjgOB5qAWiDgf+3XqsDR4X4mCMb4Cw71S6Cp5W70P0rJznd32dHdmB2P+GtNxH/NhjlAGWouyY/jC1DjfOQFK8zVa6EKw1iaBDk8Rja2yU/X+qMjGUnDgu67k21fBgwXcvcn9SA37kongFXGvPZghpwZRuaXwE7il5qH1Zzq24+UtpfBESuv7GPiZ+6m+XLikybocbxtrC3AN8BncFX+NH/O+uap+xe2htLYKvlwQIDAQAB',
            privateKey: 'MIIEpAIBAAKCAQEAhFrwbGn7uwzmgdkrwpH2Hxzz4cGbZBzct61A2O9KwZpOAo9vPaBKkQFk4AvmWgYv1ItRbQ6cRoG0TwMhR27/So0VYMiRkO+nbvVeWCDndQTltip8tIwdkozEGN58F8n8GoodlO7jzeZ+ty0Xb8vyuLiV6yT0PjdSjxwrjtE6OwcIXSpWFJv5hhV0IDa8cSENq5z+ABUGViuJzAyzxFovef7CS3QqCaL7PYkKyjtNMB+mP+OrVgs2TGm+5fJIYAOqiQK/egzix3PAu/iZHRUD/5p0TXW5zQ1vDXpVk/+ReM/aUA+CEY8T85ObTRwFVZyko61jvnqx2BfeNS6x/73GoQIDAQABAoIBAQCCQUEVYOQ1fIepyIGRdbZDfmnhhnkX+HObbC1CkZT/nY0iZeizPHnF5RpSiEOF20rdINLcwiE4HlPF4q2wsGMcCma8ngbsHX6o61+S2acP+ebb9UpPIQnFfTVLyEFV5BlwQPbF6KhWrX2NZhoHky5nbnlUNkUMqcNdRfr0DaMCDQpZSZh+/jFtgjGawN/1WFTiz8RX10TBp5I59+945jkkct7H6dbo7/jxZKnOrzWgJe+jjo50X/Xh2f0yHik9LovjzuO9mw30gYMAGdVsJgyX8hI92a9oLhmUGJgpn15QrIErm9ykC22FwfxXgRBGxsIX10GWNL4QWzJzfRv9EVlVAoGBALyzDxKl3rMu45PNP0jXBFiG+ydcnVdIOikuIIMsvx4WfGhrfT5bnPf+tnEiAzqsw5Hq9MUaKcdlKfm2v7/ybgEpSPo7QhnF97ba35/vNAB3I+llUnZcEf4u+JYQAs/YdUKDFlEAKmXztRRyqwAsvjyFgNauGwQTZjcivN4hh0SbAoGBALOPcyFDePvAxcBgW1E0SSVEjsILRmJeyiygX/sZqz8B/IiIjIQAdbSumadVYNaoEYDe9OKD2yMXwMGjtAahcl0KkV66N+1oq1trbIzcRlgMe7GgXQimgizxoS/atTA5LggZo09CA/LXFHixe2BpYjYw8WB47rYCCVs35kgHfK9zAoGAGeHBdoBTvGX5BwPG41nCmdXhyvNUDW21tIJEKVnQ2PKim7vqkMwGCqngIkJVCQ47QN9mNUayZkwE5uBfCpfY6MXd4ZyRI3HY2TbKJ2iqzEmLHm8sUVmtihytMf/+Mr3wz2+ldvS73AICW0yjEcIRUcHJ+ygkQnnaskNMfndA03MCgYEAhjdUrGl91lh6uFiOCX3Wqve66cp5uu/1mTPraor+WOOIOxouRkD9uqfEDLMh5nHMW5LMY0CCHZIUr+lImKg3DtrmXHM/eMMDSxtaEVRZdFkoYFZpFB06MpQOkvGc+8XR5ZYcXxMOVod0Mt8fRKqhEba1xhG/BOcyzS9Uf0Sxa4cCgYAm1yip9XGUoYd8U43JlTf0/Mx7Q7R1CbS/Iz2YZ/wS6xbbh3Sy5oQWWxX5yaustwqbe6JT59y4FpJsKyk2YtpzvB2jKWwTBLmZTj+Bp387lN0R0CZT0IqGj436wsT6H6Cxih+WTZHvjsiKbTeyTDOjerkdSOo+spB3gzbH7ldRQw==',
            version: '1.0',
            biz_content: biz_content
          },
          headers: {
            'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        }).then(res => {
          console.log(res.data)
          if (res.status === 200) {
            // console.log(res.data)
            _this.runCode(res.data)
          }
        })
      })
    },
    runCode (html) {
      document.getElementById('payform').innerHTML = html
      document.forms[0].submit()
      const newwin = window.open('', '', '')
      newwin.opener = null
      newwin.document.write(html)
      newwin.document.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}

.shopcart-container {
  background: #eee;
  overflow: hidden;
  // 商品列表
  .goods-list {
    margin-top: 10px;

    .mui-card {
      margin: 0;

      .mui-card-content {
        border-bottom: 1px solid #eee;

        .mui-card-content-inner {
          align-items: center;
          padding: 10px;

          img {
            width: 60px;
          }

          .info {
            margin-left: 10px;
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;

            h1 {
              font-size: 13px;
              font-weight: bold;
              line-height: 20px;
              padding-top: 22px;
            }

            p {
              flex-direction: row;
              align-items: center;
              justify-content: space-between;

              .price {
                font-size: 16px;
                font-weight: 700;
                color: red;
                flex: 1
              }
            }
          }
        }
      }

      // 配送信息
      .process-info {
        padding: 10px;
        border-bottom: 1px solid #eee;

        p {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          color: #333;

          span {
            color: #999
          }
        }
      }
    }
  }

  // 运费信息
  .fare-info {
    padding: 10px;
    margin: 10px 0 0 0;

    .fare-price {
      padding: 5px 0;
      display: flex;
      justify-content: space-between;

      .red {
        color: red;
        font-size: 16px;
      }
    }
  }
}
</style>
